<template>
<!-- 待发货组件 -->
   <div>
    <ul>
       <li v-for="(item, index) in filterdai" :key="index">
        <div class="titles">
          <div>{{ item.name }}</div>
          <div class="ck"><div>{{item.paystatus}}</div></div>
        </div>
        <div class="contents">
          <div class="leftimg">
            <img :src="item.cShopImgSrc" alt="" />
          </div>
          <div class="righttext">
            <p>{{ item.title }}</p>
            <div class="num">
              <div class="pricenum">{{ item.ctype }}</div>
              <div>
                x<span>{{ item.num }}</span>
              </div>
            </div>
            <p>
              ￥<span>{{ item.price * item.num }}</span>
            </p>
          </div>
        </div>
        <div class="nums">
          <div>
            {{ item.allnumprice }}
          </div>
          <div class="btns">
            <button>取消订单</button>
            <button>收货地址</button>
          </div>
        </div>
      </li> 
    </ul>
  </div>
</template>

<script>
import pulicslot2 from '../pulicslot2';
export default {
  computed:{
     filterdai(){
          return this.daifahuo.filter((item)=>item.paystatus=='代发货');
      }
  },
    components:{
        // pulicslot2
    },
    methods: {
    },
    mounted(){
      // let obj=localStorage.getItem('');
    let objarr= JSON.parse(localStorage.getItem("shangpindata")) 
    this.daifahuo=objarr;
      console.log(this.daifahuo);
    },
    data(){
      return{
        daifahuo:[]
      }
    }
}
</script>

<style lang="less" scoped>
li{
        padding: 10px 40px 30px 40px;
        font-size: 33px;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 10px;
        .titles{
            display: flex;
            justify-content: space-between;
            .ck{
                font-size: 25px;
                color: red;
            }
        }
        .contents{
            display: flex;
            text-align: left;
            img{
                width: 180px;
            }
            .righttext{
                width: 70%;
                margin-left: 20px;
                line-height: 60px;
                font-size: 27px;
                .num{
                    display: flex;
                    justify-content: space-between;
                    .pricenum{
                        background-color: #f2f2f2;
                    }
                    :nth-child(1){
                        border-radius: 30px;
                        width: 300px;
                        height: 40px;
                        line-height: 40px;
                        font-size: 25px;
                        text-align: center;
                        margin-top: 10px;
                    }
                    :nth-child(2){
                        color: #d9d9d9;
                    }
                }
                :nth-child(3){
                    color: red;
                }
            }
            
        }
        .nums{
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size:25px;
            .btns{
                width: 50%;
                button{
                    width: 140px;
                    border: 4px solid #d0d0d0;
                    border-radius: 30px;
                    margin-left: 15px;
                    background-color: #fff;
                }
                :nth-child(1){
                    color: #d0d0d0;
                    border-color:#d0d0d0;
                }
                :nth-child(2){
                    color: red;
                    border-color:red;
                }
            }
        }
    }
</style>